<template>
	<view v-if="brandInfo" class="page brand-detail">
		<!-- 轮播图 -->
		<view class="brand-banner">
			<uni-swiper-dot :info="banners" :current="bannerCurrent" mode="round" :dotsStyles="dotsStyles">
				<swiper class="brand-swipe" :autoplay="true" :interval="3000" :circular="true" @change="swiperChange">
					<swiper-item class="brand-swipe-item w100 h100" v-for="(item, index) in banners" :key="index">
						<view class="brand-img w100 h100 bg-cover" :style="{backgroundImage: 'url(' + (imgPath + item) + ')'}"></view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<image class="logo" mode="widthFix" :src="brandInfo.ico_img"></image>
		<view class="content">
			<rich-text :nodes="brandInfo.content"></rich-text>
		</view>
		<view class="btn font15 font-ffffff tc" @click="goHotel">搜索{{brandInfo.name}}酒店</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPath: this.$Config.http_static, // 图片头
				// 轮播图
				banners: [],
				bannerCurrent: 0,
				dotsStyles: {
					width: 6,
					height: 6,
					bottom: 15,
					border: '0 rgba(255,255,255,.4) solid',
					backgroundColor: 'rgba(255,255,255,.4)',
					selectedBackgroundColor: '#ffffff',
					selectedBorder: '0 #ffffff solid'
				},
				brandInfo: null
			}
		},
		onLoad (options) {
			// 品牌详情
			this.$Http({
				url: 'brandInfo',
				data: {
					id: options.id
				},
			}).then(res => {
				res.data[0].ico_img = this.$Config.http_static + res.data[0].ico_img
				this.banners = res.data[0].img.split(",")
				this.brandInfo = res.data[0]
			});
		},
		methods: {
			// 轮播图change
			swiperChange(e) {
				this.bannerCurrent = e.detail.current;
			},
			// 查询酒店列表
			goHotel () {
				let hotelQuery = {
					keyword: {
						name: this.brandInfo.name
					}
				}
				uni.setStorage({key: 'hotelQuery', data: hotelQuery})
				uni.navigateTo({ url: '/pages/hotel/hotelList' });
			}
		}
	}
</script>

<style lang="less">
	@import '@/common/css/variables.less';
	/* 品牌详情 */
	.brand-detail{
		.brand-swipe{width: 750rpx;height: 500rpx;}
		.logo{display: block; width: 40%;margin: 30rpx auto;}
		.content{padding: 0 30rpx;font-size: 28rpx;line-height: 48rpx;}
		.btn{width: 600rpx;line-height: 76rpx;border-radius: 38rpx;background-color: @theme-color;margin: 50rpx auto 0;}
	}
</style>
